<template>
    <div class="MyFilePanelZone">
        <div class="MyFilePanelTitle">我的文件</div>
        <div class="MyFileZone">
            <el-row>
                <el-col v-for="i in FileList" :key=i.uuid :span="4" :offset="index > 0 ? 2 : 0">
                    <el-card :body-style="{ padding: '0px' }" @click="clickCard(i)"
                        :style="{ backgroundColor: i.backColor }">
                        <img v-bind:src=i.iconURL class="image" />
                        <div style="padding: 0px">
                            <span>{{ i.name }}</span>
                        </div>
                    </el-card>
                    <div style="padding: 0px">
                        <!-- <span v-if="isEditFileNameUID != i.uuid" @click="onClickToReName(i.uuid, i.name)">{{ i.name
                            }}</span> -->
                        <el-input v-model="i.name" v-if="isEditFileNameUID == i.uuid" autofocus size="mini"
                            :ref="FileNameInput" @blur.stop="sureReName(i.uuid)">
                        </el-input>
                    </div>
                    <el-tooltip class="item" effect="light" content="删除" placement="top" :show-after=toolTipTime>
                        <el-button type="primary" size="small" @click="onDelete(i.uuid, i.name)" circle
                            :icon="Delete"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="light" content="修改文件名" placement="top" :show-after=toolTipTime>
                        <el-button type="primary" size="small" @click="onClickToReName(i.uuid, i.name)" :icon="Edit"
                            circle>
                        </el-button>
                    </el-tooltip>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();

import { useStore } from 'vuex';
const store = useStore();

import axios from 'axios'
import { LgxCompressTool } from '../../script/canvas/common/tools/commpresstool.js'
import lgxcom from '../../script/canvas/common/common'

let stTime = 0;
let endTime = 0;
let FileList = ref([])
const isEditFileNameUID = ref("")

const onClickToReName = (uuid, name) => {
    console.log("rename file:" + name + "   " + uuid);
    console.log(FileList.value);
    isEditFileNameUID.value = uuid;
}


const onDelete = (uuid, name) => {
    let msg = "确认删除文件？<br> <span class='name'>" + name + "</span> <br>删除后将不可撤回！！！";
    ElMessageBox.confirm(msg, '文件删除警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true, // 使用 HTML 字符串
        }
    )
        .then(() => {
            console.log("delete file:" + name + "   " + uuid);
            let fileObj = {};
            fileObj["uuid"] = uuid;
            fileObj["name"] = name;
            post2DeleteFile(fileObj);
        })
        .catch(() => {
            return;
        })
}

const sureReName = (uuid) => {
    console.log("uuid=" + uuid);
    isEditFileNameUID.value = "";
    let dstFile = null;
    for (var i = 0; i < FileList.value.length; i++) {
        var tmp = FileList.value[i];
        if (tmp["uuid"] == uuid) {
            dstFile = tmp;
            break;
        }
    }

    if (dstFile) {
        let fileObj = {};
        fileObj["uuid"] = uuid;
        fileObj["name"] = dstFile["name"];
        fileObj["parent"] = dstFile["parent"];
        fileObj["iconURL"] = dstFile["iconURL"];
        post2UpdateFile(fileObj);
    }
    console.log(FileList.value);
}

const post2UpdateFile = function (obj) {
    var url = "api/graph/updateProfile";
    axios.post(url, obj).then(res => {
        console.log(res.data);
        getAllFiles();
    }).catch(function (error) {
        console.log(error);
    })
}

const post2DeleteFile = function (obj) {
    var url = "api/graph/delete";
    axios.post(url, obj).then(res => {
        console.log(res.data);
        getAllFiles();
    }).catch(function (error) {
        console.log(error);
    })
}

const clickCard = (item) => {
    window.gstore.commit("switchLazyFile", item);
    let editorPath = "/viso";
    switch (item.fileMode) {
        case "viso":
            editorPath = "/viso";
            break;

        case "autocad":
            editorPath = "/cad";
            break;

        case "xmind":
            editorPath = "/xmind";
            break;
    }
    router.push(editorPath);
}



const parseFiles = (fileJsonObjArray) => {
    console.log("parseFiles---------");
    FileList.value = [];
    for (var i = 0; i < fileJsonObjArray.length; i++) {
        var unitObj = fileJsonObjArray[i];
        let uuid = unitObj["uuid"];
        let name = unitObj["name"];
        if (name == "test345") {
            console.log(name);
        }
        let parent = unitObj["parent"];
        let zipIconURL = unitObj["iconURL"];
        let maintype = unitObj["maintype"];
        let projectid = unitObj["projectid"];
        let userid = unitObj["userid"];
        let fileMode = unitObj["filetype"];
        let iconURL = zipIconURL;

        let backColor = '#ffffff';
        let extInfoStr = unitObj["extInfo"];
        if (extInfoStr && extInfoStr.length > 0) {
            let extInfo = JSON.parse(extInfoStr);
            let bk = new lgxcom.LGXColor();
            bk.setColorByValue(parseInt(extInfo.backColor));
            backColor = bk.toHexString();
        }
        let errFlag = false;
        if (maintype != "subfile") {
            if (iconURL.length == 0) {
                iconURL = "/res/icon/0x030d0104.png";
            }
            else {
                try {
                    iconURL = LgxCompressTool.deCompresseBase64Str(zipIconURL);
                    console.log("zipLenth:" + zipIconURL.length + " origLenth:" + iconURL.length);
                }
                catch (error) {
                    console.log("error uuid:" + uuid + " name:" + name);
                    iconURL = zipIconURL;
                    errFlag = true;
                }
            }
            let newFile = { uuid, name, parent, iconURL, projectid, userid, fileMode, backColor };
            FileList.value.push(newFile);
        }
    }
    store.commit("updateMyFileList", FileList.value);
}

const getAllFiles = () => {
    var url = "api/graph/getAll";
    let userid = store.state.uid;
    var postObj = { userid };
    axios.post(url, postObj).then(res => {
        console.log(res.data);
        parseFiles(res.data);
        const currentDate = new Date();
        endTime = currentDate.getTime();
        let t = (endTime - stTime);
        console.log("time elapse:" + t);
    }).catch(function (error) {
        console.log(error);
    })
}

onMounted(() => {
    console.log("chart onMounted");
    let memFileList = store.state.cacheMyFileList;
    if (memFileList.length > 0) {
        FileList.value = memFileList;
    }
    else {
        const currentDate = new Date();
        stTime = currentDate.getTime();
        getAllFiles();
    }
})

var loadMyFile = function () {
    getAllFiles();
}

defineExpose({
    loadMyFile
});

</script>

<style>
.time {
    font-size: 12px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.button {
    padding: 0;
    min-height: auto;
}

.image {
    width: 100%;
    display: block;
    border-radius: 4px;
    border-bottom: 20px;
}

.MyFilePanelTitle {
    font-family: verdana;
    color: blue;
    font-size: 20px;
    text-align: center;
    margin: 0;
    background-color: cadetblue;
    height: 20px
}

.MyFilePanelZone {
    height: 100%;
    max-height: 100%;
    background-color: rgb(247, 247, 248);
}


.MyFileZone {
    height: 400px;
    max-height: 100%;
    overflow-y: auto;
}
.name {
  color: red;
}
</style>